<template>
  <div ref="dataScreen" v-loading="loading" :class="[isFullscreen ? 'dataScreen' : 'dataScreen screenStyle' ]">
    <h2>{{ $t('大数据显示屏') }}</h2>
    <!-- 正常 -->
    <span @click="fullscreen(false)"><svg-icon v-if="isFullscreen" icon-class="fullscreen" /></span>
    <!-- 全屏 -->
    <span @click="fullscreen(true)"><svg-icon v-if="!isFullscreen" icon-class="exit-fullscreen" /></span>

    <el-row :gutter="20">
      <el-col :span="7" class="el-row-col">
        <div class="boxall" style="margin-right: 25px;">
          <ul class="screenData">
            <li>
              <p>{{ summaryData.dealCount ? moneyFormatUnit(summaryData.dealCount) : 0 }}</p>
              <p :title="$t('累计投资项目')">{{ $t('累计投资项目') }}</p>
            </li>
            <li>
              <p>{{ summaryData.investmentMoney ? moneyFormatUnit(summaryData.investmentMoney, 'm') : 0 }}</p>
              <p>{{ $t('累计投资金额') }}({{ $t('百万') }})</p>
            </li>
            <li>
              <p>{{ summaryData.receivableTotal ? moneyFormatUnit(summaryData.receivableTotal, 'm') : 0 }}</p>
              <p>{{ $t('投资回款总额') }}({{ $t('百万') }})</p>
            </li>
          </ul>
          <div class="boxfoot" />
        </div>
        <div class="boxall" style="margin-right: 25px;">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('项目类型占比') }}</p>
            <DealType ref="DealType" :chart-data="dealTypeData" @clickName="onClickName" />
          </div>
          <div class="boxfoot" />
        </div>
        <div class="boxall">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('项目状态占比') }}</p>
            <DealState ref="DealState" :chart-data="dealStatusData" @clickStateName="onClickStateName" />
          </div>
          <div class="boxfoot" />
        </div>
      </el-col>
      <el-col :span="10">
        <div class="boxall noborder" style="height: calc((100% - 140px) / 2 + 100px);">
          <div class="map" style="height:100%;">
            <MapChart ref="MapChart" :chart-data="chartData" @clickHandel="onClickHandel" />
          </div>
        </div>
        <div class="boxall" style="height: calc((100% - 140px) / 2);">
          <div style="height:100%;position:relative;">
            <dict-select
              v-model="stageType"
              dictionary="deal_type"
              :clearable="false"
              size="mini"
              class="select-deal"
              @change="stageTypeChange"
            />
            <p class="chartTit">{{ $t('项目阶段统计') }}</p>
            <DealPhase ref="DealPhase" :chart-data="dealStageData" />
          </div>
          <div class="boxfoot" />
        </div>
      </el-col>
      <el-col :span="7" class="el-row-col">
        <div class="boxall" style="margin-left: 25px;">
          <ul class="screenData">
            <li>
              <p>{{ summaryData.receivablePrincipal ? moneyFormatUnit(summaryData.receivablePrincipal, 'm') : 0 }}</p>
              <p>{{ $t('投资回款本金') }}({{ $t('百万') }})</p>
            </li>
            <li>
              <p>{{ summaryData.newDealCount ? moneyFormatUnit(summaryData.newDealCount) : 0 }}</p>
              <p>{{ $t('近一月新增项目') }}</p>
            </li>
            <li>
              <p>{{ moneyFormatUnit(summaryData.irr) }}%</p>
              <p>{{ $t('IRR') }}</p>
            </li>
          </ul>
          <div class="boxfoot" />
        </div>
        <div class="boxall" style="margin-left: 25px;">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('项目行业分布') }}</p>
            <DealIndustry ref="DealIndustry" :chart-data="dealIndustryData" @clickIndustryName="onClickIndustryName" />
          </div>
          <div class="boxfoot" />
        </div>
        <div class="boxall">
          <div style="height:100%;">
            <p class="chartTit lt">{{ $t('项目团队统计') }}</p>
            <DealTeam ref="DealTeam" :chart-data="dealTeamData" />
          </div>
          <div class="boxfoot" />
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <component :is="path" />
    </el-dialog>
  </div>
</template>
<script>
import MapChart from '@/views/deal/report/chart/mapChart'
import DealType from '@/views/deal/report/chart/dealType'
import DealState from '@/views/deal/report/chart/dealState'
import DealPhase from '@/views/deal/report/chart/dealPhase'
import DealTeam from '@/views/deal/report/chart/dealTeam'
import DealIndustry from '@/views/deal/report/chart/dealIndustry'
import { getAsyncComponent } from '@/utils'
import {
  countDealArea,
  findDealTypeProportion,
  countIndustryFocus,
  findDealStatusProportion,
  countDealStage,
  dealTeamCount
} from '@/api/base/deal/dealBase'
import { dataScreenSummary } from './dataScreen'
export default {
  components: {
    MapChart,
    DealType,
    DealState,
    DealPhase,
    DealTeam,
    DealIndustry
  },
  data() {
    return {
      stageType: 'equity',
      loading: false,
      // 汇总值数据
      summaryData: {},
      // 投资地域统计
      chartData: [],
      // 项目类型占比
      dealTypeData: [],
      // 聚焦行业统计
      dealIndustryData: [],
      // 项目状态占比
      dealStatusData: [],
      // 项目阶段统计
      dealStageData: [],
      // 项目团队统计
      dealTeamData: [],
      dynamicHeight: 180,
      isFullscreen: true,
      boxHeight: 350,
      dataHeight: 0,
      // 由于修改项目地域分布countDealArea改成了post方法
      queryParams: {},
      dialogVisible: false,
      path: '',
      title: ''
    }
  },
  computed: {
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.load()
      })()
    }
    this.$nextTick(() => {
      this.load()
    })
  },
  methods: {
    stageTypeChange(val) {
      this.loadDeal(val)
    },
    // 初始化数据
    initData() {
      this.loading = true
      countDealArea(this.queryParams).then(response => {
        this.chartData = response.data
      })
      findDealTypeProportion().then(response => {
        this.dealTypeData = response.data
      })
      countIndustryFocus('XMJJHY').then(response => {
        this.dealIndustryData = response.data
      })
      findDealStatusProportion().then(response => {
        this.dealStatusData = response.data
      })
      // countDealStage({}).then(response => {
      //   this.dealStageData = response.data
      // })
      dealTeamCount(null).then(response => {
        this.dealTeamData = response.rows
      })

      // 查询汇总值数据
      dataScreenSummary().then(response => {
        this.summaryData = response.data
      })
      this.loadDeal()

      this.loading = false
    },
    loadDeal(type) {
      var row = {
        stageType: type || 'equity'
      }
      countDealStage(row).then(response => {
        this.dealStageData = response.data || []
      })
    },
    fullscreen(is) {
      this.isFullscreen = is
      this.load()
    },
    load() {
      this.$nextTick(() => {
        if (this.$refs?.dataScreen?.clientHeight !== undefined) {
          this.boxHeight = this.$refs.dataScreen.clientHeight * 0.58
          this.dynamicHeight = this.$refs.dataScreen.clientHeight - this.boxHeight - 110
          this.dataHeight = this.boxHeight - this.dynamicHeight - 10

          var obj = {}
          for (obj in this.$refs) {
            if (this.$refs[obj]?.initChart !== undefined) {
              this.$refs[obj].initChart()
              this.$refs[obj].chart.resize()
              this.$refs[obj].$_resizeHandler()
            }
          }
          this.initData()
        }
      })
    },
    // 点击的名字
    onClickName(name) {
      if (name) {
        this.title = name
        this.dialogVisible = true
        // '@/views/deal/report/chart/charTable'
         // const path = '@/views/deal/report/projectInvestmentSituation/projectInvestmentSituation'
         let path = ''
               let type = ''
              if (name === '股权投资') {
                type = 'equity'
              } else if (name === '参股基金') {
                 type = 'bf'
              } else if (name === '债权投资') {
                type = 'debt'
              } else if (name === '地产项目') {
                type = 'estate'
              } else if (name === '债券投资') {
                type = 'bond'
              }
            this.$route.params.dealType = type
             this.$route.params.model = 1
            path = '@/views/deal/report/chart/charTable'

         this.path = getAsyncComponent(path)
      }
    },
    onClickHandel(areaId) {
      // 地区ID
      if (areaId && areaId !== '无') {
        this.title = name
        this.dialogVisible = true

        let path = ''
        this.$route.params.areaId = areaId
        this.$route.params.model = 1
        path = '@/views/deal/report/chart/charTable'

        this.path = getAsyncComponent(path)
      }
    },
    // 聚焦行业
    onClickIndustryName(name) {
       if (name) {
            this.title = name
            this.dialogVisible = true
            this.$route.params.model = 2
            this.$route.params.dealType = name
            this.$route.params.busType = 'XMJJHY'
            const path = '@/views/deal/report/chart/charTable'
            this.path = getAsyncComponent(path)
       }
    },
    // 项目状态
    onClickStateName(name) {
        if (name) {
          this.title = name
          this.dialogVisible = true
          let type = ''
           if (name === '储备') {
              type = 'CB'
           } else if (name === '投前') {
              type = 'TQ'
           } else if (name === '投后') {
              type = 'TH'
           } else if (name === '终止') {
              type = 'ZZ'
           } else if (name === '退出') {
              type = 'TC'
           }
            this.$route.params.model = 3
            this.$route.params.dealType = type
             const path = '@/views/deal/report/chart/charTable'
            this.path = getAsyncComponent(path)
       }
    }
  }
}
</script>
<style lang="scss" scoped>
.select-deal{
  width: 100px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 9999;
  /deep/input{
    background-color: transparent;
    border: 1px solid #01FFFF;
    color: #01FFFF;
  }
  /deep/.el-select__caret{
    color: #01FFFF;
  }
}
</style>
